<template>
  <div class="login">
    <van-nav-bar title="登录" @click-left="$router.back()" />
    <div class="title">
      <h2>优点达资讯</h2>
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="mobile"
        left-icon="manager"
        name="用户名"
        label="用户名"
        placeholder="请输入手机号"
        :rules="rules.mobile"
      />
      <van-field
        v-model="password"
        left-icon="lock"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="rules.password"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <div class="enroll">
      <a href="javascript:;" @click="enroll">没有账号，立即注册</a>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      mobile: '13856575621',
      password: 'ccc123123',
      rules: {
        mobile: [
          { required: true, message: '请填写用户名' },
          {
            pattern:
              /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请输入正确手机号'
          }
        ],
        password: [
          { required: true, message: '请填写密码' },
          {
            pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
            message:
              '至少8个字符，至少1个大写字母，1个小写字母和1个数字,不能包含特殊字符（非数字字母）'
          }
        ]
      }
    }
  },
  methods: {
    ...mapActions('user', ['actions_getUserInfo']),
    async onSubmit(values) {
      try {
        await this.actions_getUserInfo({
          mobile: this.mobile,
          password: this.password
        })
        this.$toast.success('登录成功')
        this.$router.push('/')
      } catch (error) {}
    },
    enroll() {
      this.$router.push('/enroll')
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  padding: 30px 0;
  h2 {
    text-align: center;
    font-weight: 400;
    color: #1989fa;
  }
}
.enroll {
  padding-right: 55px;
  font-size: 12px;
  text-align: right;
}
::v-deep {
  .van-field__label {
    width: 50px !important;
  }
}
</style>
